<template>
	<view class="wechart-container">
		<view v-for="(item,index) in historys" :key="item.id" class="item" @click="goPage(item.link)">
			<view class="top">
				<view>{{item.author}}</view>
				<view class="date">{{item.niceDate}}</view>
			</view>
			<view class="title">{{item.title}}</view>
			<view class="bottom">
				<view>{{item.superChapterName}}/{{item.chapterName}}</view>
				<view class="img-collect-container" @click.stop="collect(index,item.collect)">
					
					<image class="icon-collect" :src="item.collect==true?'https://www.wanandroid.com/resources/image/pc/collect_icon_hover.svg':'https://www.wanandroid.com/resources/image/pc/collect_icon.svg'"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"wechat-list",
		props:{
		  historys:{
			  type:Array,
			  default:()=>[]
		  }	
		},
		data() {
			return {
				
			};
		},
		methods:{
			collect(index,collect){
				this.$emit('doCollect',index,collect)
			},
			goPage(link=''){
				uni.navigateTo({
					url:"/pages/webPage/webPage?url="+encodeURIComponent(link)
				})
				
			}
		}
		
	}
</script>

<style lang="scss">
	.wechart-container{
		padding: 0 32rpx 32rpx;
		
		.item{
			padding-bottom: 16rpx;
			border-bottom: 1px solid grey;
			.top{
				display: flex;
				margin-top: 16rpx;
				.date{
					margin-left: auto;
				}
			}
			.title{
				padding: 16rpx 0;
				font-size: 32rpx;
				font-weight: 600;
			}
			.bottom{
				display: flex;
				.img-collect-container{
					margin-left: auto;
					.icon-collect{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
	}

</style>